import React, { memo, useEffect, useRef, useState } from 'react'
import { shallowEqual, useSelector } from 'react-redux';
import LyricWarrper from './style'
import {
    DownOutlined,
  } from "@ant-design/icons";
import classNames from 'classnames';
import store from '@/store';
const index = memo((props) => {
    const {position,changPosition} = props
    const {
        index,
        playList,
        lyric,
        lyricIndex
      } = useSelector((state) => {
        return {
          id: state?.player?.player?.id,
          songName: state?.player?.player?.name || "",
          singerName: state?.player?.player?.ar,
          picUrl: state?.player?.player?.al?.picUrl,
          isPlay: state.player.isPlay,
          player: state.player.player,
          playList: state.player.playerList,
          index: state.player.playerIndex,
          playModel: state.player.playModel,
          lyric:state.player.lyric,
          lyricIndex:state.player.lyricIndex
        };
      }, shallowEqual);
      const [activeOffSet,changeActiveOffSet] = useState(0);
      const msgLyric = useRef();
      useEffect(()=>{
        const active = document.querySelector(".lyricActive");
        if(active){
            changeActiveOffSet(active.offsetTop);
            msgLyric.current.scrollTop = active.offsetTop-320
        }
      },[lyricIndex])
  return (
    <LyricWarrper position={position} activeOffSet={activeOffSet} picUrl={playList[index]?.al?.picUrl}>
          <DownOutlined className="down" onClick={(e) => changPosition(100)} />
          <div className="detail-main">
            <img src={playList[index]?.al?.picUrl} alt="" />
            <div className="msg">
              <div className="msg_title">
                <span>{playList[index]?.name}</span>
                <div className="vip">vip</div>
                <div className="vip">play</div>
              </div>
              <div className="msg_info">
                <h5>歌手：{playList[index] && playList[index]?.ar[0]?.name}</h5>
                <h5>专辑：{playList[index]?.al?.name}</h5>
              </div>
              <div className="msg_lyric" ref={msgLyric}>
                {
                    lyric?.map((n,i)=>{
                        return (
                            <p className={classNames({
                                lyricActive:lyricIndex===i
                            })}>{n.content}</p>
                        )
                    })
                }
              </div>
            </div>
          </div>
    </LyricWarrper>
  )
})

export default index